<template>
<div class="pr-3">
  <h4 class="my-4 pl-3">
    {{title}}
  </h4>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="负责人" prop="head">
      <el-input v-model="ruleForm.head"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="mobile">
      <el-input v-model="ruleForm.mobile"></el-input>
    </el-form-item>
    <el-form-item label="介绍" prop="introduce">
      <el-input type="textarea" v-model="ruleForm.introduce"></el-input>
    </el-form-item>
    <el-form-item v-if="isEdit">
      <el-button type="primary" @click="submitForm('ruleForm')"
        >保存</el-button
      >
    </el-form-item>
  </el-form>
</div>
  
</template>
<script>
export default {
  name: "surveyinfo",
  title: "三调办信息",
  data() {
    return {
      ruleForm: {
        id: '',
        name: '',
        head: '',
        mobile: '',
        introduce: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称名称', trigger: 'blur' }
        ],
        head: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入电话', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入介绍', trigger: 'blur' }
        ],
      }
    };
  },
  props: {
    info: {
      type: Object
    },
    title: {
      type: String,
      default: '三调办信息'
    },
    isEdit: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    this.mergeInfo()
  },
  methods: {
    
    mergeInfo () {
      this.info && Object.assign(this.ruleForm, this.info)
    },
    submitForm () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$post('survey/office/insertOrUpdateSurveyUnitInfo', this.ruleForm, {convert: false}).then(res => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.$refs.ruleForm.clearValidate();
          })
        } else {
          return false;
        }
      });
      
    }
  },
  watch: {
    info: {
      handler () {
        this.mergeInfo()
      },
      deep: true
    }
  }
};
</script>
<style lang = 'scss'>
</style>